<template>
  <div>
    <van-nav-bar :title="title" :left-text="leftText" :right-text="rightText" :left-arrow="showLeftArrow"  @click-left="onClickLeft"
      @click-right="onClickRight" />
  </div>
</template>
<script setup>
defineProps({
  title:{
    type:String,
    default:'标题'
  },
  leftText:{
    type:String,
    default:'返回'
  },
  rightText:{
    type:String,
    default:''
  },
  showLeftArrow:{
    type:Boolean,
    default:true
  }
})
const emit = defineEmits(['leftClickEvent','rightClickEvent'])

const onClickLeft = ()=>{
  emit('leftClickEvent')
}

const onClickRight = ()=>{
  emit('rightClickEvent')
}
</script>
<style lang="scss" scoped>
:deep(.van-nav-bar){
  height: 80px;
  background-color: #fff;
  .van-nav-bar__title{
    font-family: PingFangSC-Medium;
    font-size: 36px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
  }
  .van-nav-bar__text{
    font-family: PingFangSC-Regular;
    font-size: 31.2px;
    color: #666666;
    letter-spacing: 0;
    font-weight: 400;
  }
  .van-icon{
    color: #000;
  }
}

</style>